<template>
    <div class="invo-page">
        <div class="invo-box">
            <h1 class="marg-B3 t-cen">发票申请</h1>
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="企  业  名  称:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="纳税人识别号:">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="btn-box">
                        <el-button class="btn gray marg-R3" @click="cancelClick">取消</el-button>
                        <el-button class="btn b-bg marg-L3" type="primary" @click="handleCheckedSure">确认</el-button>
                    </div>	
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    data() {
        return{
            form: {
                name: '',
                code: '',
            },
            invoiceInfo: {}
        }
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            request({
                url: '/user/invoice/info',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.form.name = res.data.company_name || ''
                    this.form.code = res.data.company_number || ''
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        cancelClick() {
            this.form.name = ''
            this.form.code = ''
        },
        handleCheckedSure() {
            const formData = new FormData();
            formData.append('company_name',this.form.name);
            formData.append('company_number',this.form.code)
            request({
                url: '/user/invoice',
                method: 'POST',
                data: formData
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.message);
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .invo-page{
        // height: 100vh;
        padding: 100px 0;
        border-radius: 8px;
        background: #fff;
        .invo-box{
            width: 400px;
            margin: 0 auto;
            .btn-box{
                .btn{
                    font-size: 14px;
                    padding: 0;
                    color: #fff;
                    width: 96px;
                    height: 28px;
                    text-align: center;
                    line-height: 28px;
                    border-radius: 25px;
                }
                .b-bg{
                    background: #2967E3;
                }
                .l-bg{
                    background: #00BAAD;
                }
                .gray{
                    background: #A6A6A6;
                }
            }
        }
    }
</style>